<template>
  <div>
    <p class="title">分类</p>
    <!-- <van-badge-group :active-key="activeKey" class="tab" :style="'height:'+fullHeight+'px'">
      <van-badge
        v-for="(item,index) in stairData"
        :title="item.catName"
        @click="onClick(index,item.catNo)"
        :key="index"
      />
    </van-badge-group> -->
    <div class="content" :style="'width:'+fullWidth+'px;height:'+(fullHeight-7)+'px'">
      <img
        src="https://img11.360buyimg.com/mcoss/jfs/t1/1072/23/3672/95463/5b9a0813E175891fa/e38fc2f7c2ddfec2.jpg"
      />
      <div class="category-div">
        <h4>热门分类</h4>
        <ul>
          <li v-for="(item,index) in listData" :key="index" @click="linkDetail(item)">
            <p class="imgUrl">
              <img :src="item.narrowPicUrl" />
            </p>
            <div class="menu_right">
              <p>{{item.itemTitle}}</p>
              <span>￥{{item.price}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <navigate />
  </div>
</template>

<script>
import { Search } from "vant";
import { findItemCat, findChildItemCatByNo } from "../../api/page.js";
export default {
  name: "userindex",
  components: {
    [Search.name]: Search
  },
  data() {
    return {
      value: "",
      stairData: [],
      secondLeveData: [],
      activeKey: 0,
      catNo: 0,
      fullHeight: document.documentElement.clientHeight - 93,
      fullWidth: document.documentElement.clientWidth - 99,
      listData: []
    };
  },
  methods: {
    onSearch() {
      console.log(this.value);
    },
    onClick(key, catNo) {
      console.log(catNo);
      this.activeKey = key;
      this.catNo = catNo;
      this.secondLevelMenu();
    },
    //获取一级分类
    classification() {
      findItemCat().then(res => {
        this.stairData = res.data;
        this.catNo = this.stairData[0].catNo;
        this.secondLevelMenu();
      });
    },
    //获取二级分类
    secondLevelMenu() {
      findChildItemCatByNo({
        catNo: this.catNo
      }).then(res => {
        this.listData = res.data;
      });
    },
    linkDetail(item) {
      this.$router.push({
        name: "productDetail",
        query: { itemNo: item.itemNo }
      });
    }
  },
  mounted() {
    this.classification();
  }
};
</script>

<style lang="less" scoped>
.title {
  font-size: 0.18rem;
  text-align: center;
  padding: 0.1rem 0;
}
.tab {
  float: left;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  .van-badge {
    padding: 15px 12px 15px 9px;
  }
  .van-badge:not(:last-child)::after {
    height: 199%;
  }
}
.content {
  float: left;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
  margin: 7px 7px 0;
  font-size: 12px;
  img {
    width: 100%;
  }
  .category-div {
    margin: 19px 0px 0;
    h4 {
      font-size: 14px;
      color: #333;
    }
    ul {
      margin-top: 10px;
    }
    li {
      display: flex;
      justify-content: start;
      padding: 0.05rem 0.12rem 0.05rem 0;
      .imgUrl {
        width: 0.9rem;
        height: 1rem;
        overflow-y: hidden;
        img {
          width: 100%;
        }
      }
      .menu_right {
        width: 60%;
        margin-left: 0.15rem;
        padding-top: 0.1rem;
        p {
          font-size: 0.13rem;
          color: #9a9d9f;
          line-height: 0.2rem;
        }
        span {
          color: #ff3b2f;
          display: block;
          margin-top: 0.2rem;
        }
      }
    }
  }
}
</style>
